<template>
  <div>
    <el-table
    :data="tableData"
    style="width: 100%"
    max-height="800">
    <el-table-column
      fixed
      prop="id"
      label="ID标识"
      width="200">
    </el-table-column>
    <el-table-column
      prop="time"
      :formatter="formatDate"
      label="时间"
      width="200">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地点"
      width="200">
    </el-table-column>
    <el-table-column
      prop="type"
      label="状态"
      width="200">
      <template slot-scope="scope">
          {{ scope.row.type == 1 ? '已注册' : scope.row.type == 0 ?'已注销': '' }}
      </template>
    </el-table-column>
    <el-table-column
      prop="user"
      label="登录用户名"
      width="200">
    </el-table-column>
    <el-table-column
      prop="ip"
      label="登录用户主机IP地址"
      width="200">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="225">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope.$index, scope.row)"
          type="primary" 
          round>
          移除
        </el-button>
        <el-button 
          @click.native.prevent="setInvert(scope.$index, scope.row)"
          type="info" 
          round>
        登入/登出
        </el-button>
      </template>
    </el-table-column>
  </el-table>
    <el-pagination
      background
      current-page
      page-size=10
      prev-page="上一页"
      next-page="下一页"
      @current-change="currentPage"
      layout="prev, pager, next , jumper, total"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { listLogins,listLogouts,delLog,setInvert,getLoglist } from '@/api/'
  export default {
    methods: {
        formatDate(row, column) {
          // 获取单元格数据
          let data = row[column.property]
          if(data == null) {
              return null
          }
          let dt = new Date(data)
          return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
        },
        currentPage(page) {
        let _this = this
        if(this.id == 1){
            listLogins(page).then((response) => {
                if(response.data.total == 0){
                    _this.$message('无记录');
                }else{
                    _this.total = response.data.total
                    _this.tableData = response.data.list
                    _this.$notify({
                      title: '数据挖掘成功',
                      message: '已登入列表',
                      type: 'success'
                    });
                }
            })
        }
        if(this.id == 0){
            listLogouts(page).then((response) => {
                if(response.data.total == 0){
                    _this.$message('无记录');
                }else{
                    _this.total = response.data.total
                    _this.tableData = response.data.list
                    _this.$notify({
                      title: '数据挖掘成功',
                      message: '已登出列表',
                      type: 'success'
                    });
                }
            })
        }
        },
        deleteRow(index, rows) {
          let _this = this
          delLog(rows.id).then((response) => {
            if(response){
               _this.$alert("删除成功",'删除记录',{
                  confirmButtonText: '确定',
                  callback: action => {
                    location.reload()
                  }
              });
            }
          })
        },
        setInvert(index, rows) {
          let _this = this
          setInvert(rows).then((response) => {
            if(response){
              _this.$notify({
                title: '成功',
                message: '操作成功',
                type: 'success'
              });
            }else{
              _this.$notify.error({
                title: '错误',
                message: '操作失败'
              });
            }
            location.reload()
          })
        }
    },
    data() {
      return {
        id:0,
        total:1,
        tableData: []
      }
    },
    created(){
      let id = this.$route.query.id
      this.id = id
      let _this = this
      if(id == 1){
        listLogins(1).then((response) => {
          if(response.data.total == 0){
            _this.$message('无记录');
          }else{
            _this.total = response.data.total
            _this.tableData = response.data.list
            _this.$notify({
              title: '数据挖掘成功',
              message: '已登入列表',
              type: 'success'
            });
          }
        })
        return
      }
      if(id == 0){
        listLogouts(1).then((response) => {
          if(response.data.total == 0){
            _this.$message('无记录');
          }else{
            _this.total = response.data.total
            _this.tableData = response.data.list
            _this.$notify({
              title: '数据挖掘成功',
              message: '已登出列表',
              type: 'success'
            });
          }
        })
        return
      }
      getLoglist().then((response) => {
        if(response){
          _this.tableData = response.data
          _this.$notify({
            title: '数据挖掘成功',
            type: 'success'
          });
        }else{
          _this.$notify({
            title: '数据挖掘失败',
            type: 'warning'
          });
        }
      })
    }
  }
</script>